package com.carbohydrate42.kotlin_compose_demo.compose

import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.rememberTransformableState
import androidx.compose.foundation.gestures.transformable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.tooling.preview.Preview
import coil.compose.AsyncImage

/**
 * 还有一个高级版, 可参考
 * https://juejin.cn/post/7091206855153877000
 */

/**
 * todo 问题是, 采用 scaffold 之后, 上下边都会被占据, 是否有类似于 前端 css 的 z-index 的属性, 能够进行全屏遮罩 ?
 *
 * 全屏图片查看, 双指放大, 双击关闭, 参考
 * https://blog.csdn.net/sinat_38184748/article/details/121858073
 * @param modifier Modifier
 * @param url String
 * @param onClick Function0<Unit>  单击图片
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FullScreenImage(
    modifier: Modifier = Modifier,
    url: String,
) {

    // 是否全屏显示图片
    var isShowImageFullScreen by remember {
        mutableStateOf(false)
    }

    var scale by remember { mutableStateOf(1f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { zoomChange, _, _ ->
        scale = (zoomChange * scale).coerceAtLeast(1f)
    }


    if (isShowImageFullScreen) {
        Surface(
            color = Color.Black,
            modifier = modifier
                .fillMaxSize()
                .pointerInput(Unit) {
                    detectTapGestures(
                        onDoubleTap = {
                            scale = 1f
                            offset = Offset.Zero
                        },
                        onTap = {
                            isShowImageFullScreen = false
                        }
                    )
                }
        ) {
            AsyncImage(
                model = url,
                contentDescription = null,
                // todo 手势交互还存在问题, 需要研究下文档
                modifier = Modifier
                    .fillMaxSize()
                    .transformable(state = state)
                    .graphicsLayer(
                        scaleX = scale,
                        scaleY = scale,
                        translationX = offset.x,
                        translationY = offset.y
                    )
                    .pointerInput(Unit) {
                        detectDragGestures { _, dragAmount ->
                            offset += dragAmount
                        }
                    }
            )
        }
    } else {
        Surface(
            onClick = {isShowImageFullScreen = true}
        ) {
            /**
             * coil 的图片异步加载 compose 组件
             */
            AsyncImage(
                model = url,
                contentDescription = null,
            )
        }
    }

}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun Preview() {

    FullScreenImage(url = "http://192.168.1.27/assets/png/haiyunlogo-a9d62775.png")
}